const renderedCenters = new Set(); // 存储已经渲染过的中心点

mars2d.Util.fetchJson({
  url: "//data.mars2d.cn/file/geojson/areas/340100_full.json"
})
.then((geojson) => {
  const arr = mars2d.Util.geoJsonToGraphics(geojson) // 解析geojson
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i]

    // polygon面
    const polygonEntity = new mars2d.graphic.Polygon({
      latlngs: item.latlngs,
      style: {
        fill: true,
        fillColor: "#4881a7",
        fillOpacity: 0.5,
      },
    })
    graphicLayer.addGraphic(polygonEntity)

    // PolylineEntity线
    const graphicLine = new mars2d.graphic.Polyline({
      latlngs: item.latlngs,
      style: {
        color: "rgba(255,255,255,0.5)",
        width: 1,
      },
    })
    graphicLayer.addGraphic(graphicLine)

    // 中心点
    const center = item.attr.centroid

    // 检查该中心点是否已经渲染过
    const centerKey = `${center[1]}_${center[0]}`
    if (renderedCenters.has(centerKey)) {
      continue // 如果已经渲染过，跳过此区域
    }
    renderedCenters.add(centerKey) // 标记此中心点已经渲染过

    // 扩散点
    const graphic = new mars2d.graphic.Marker({
      latlng: [center[1], center[0]],
      style: {
        width: 8,
        pulse: true,
        pulseColor: "#ff0000",
      },
    })
    graphicLayer.addGraphic(graphic)

    // 数字显示
    const number = Math.floor(Math.random() * (4000 - 3000 + 1) + 3000) // 随机数字 3000-4000
    const divGraphic = new mars2d.graphic.DivGraphic({
      latlng: [center[1], center[0]],
      style: {
        html: `<div class="marsBlackPanel animation-spaceInDown">
                <div class="marsBlackPanel-text">${item.attr.name} ${number}</div>
              </div>`,
        horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
        verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
      },
    })
    graphicLayer.addGraphic(divGraphic)
  }
})
.catch((error) => {
  console.log("请求出错了", error)
})
